<template>
  <div class="all">
    <el-card class="box-card">
      <span slot="header" class="title">用户注册</span>
      <el-form
        :model="userList"
        label-width="80px"
        :rules="rules"
        ref="userList"
        style="width: 300px; margin: 20px auto"
      >
        <el-form-item label="用户姓名" prop="user_name">
          <el-input v-model="userList.user_name"></el-input>
        </el-form-item>
        <el-form-item label="用户电话" prop="user_telephone">
          <el-input v-model="userList.user_telephone"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="user_password">
          <el-input type="password" v-model="userList.user_password"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="user_sex">
          <el-radio v-model="userList.user_sex" label="男">男</el-radio>
          <el-radio v-model="userList.user_sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100px" @click="submitForm('userList')"
            >立即注册</el-button
          >
          <el-button style="width: 100px" @click="cancle()">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template> 
<script>
export default {
  data() {
    return {
      userList: {
        user_name: "",
        user_telephone: "",
        user_password: "",
        user_sex: "",
      },
      rules: {
        user_name: [
          { required: true, message: "请输入用户ID", trigger: "blur" },
          { min: 2, max: 7, message: "长度在3到10个字符", tregger: "blur" },
          {pattern: /^[\u4E00-\u9FA5]+$/, message: '用户名只能为中文'}
        ],
        user_telephone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, max: 11, message: "请输入11位手机号码", tregger: "blur" },
          { 
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '请输入正确的手机号码'
          }
        ],
        user_password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          {pattern: /^(\w){6,18}$/, message: '只能输入6-18个字母、数字、下划线'}
        ],
        user_sex: [{ required: true, message: '请选择您的性别', trigger: 'change' }],
      },
    };
  },
  methods: {
    submitForm(userList) {
      this.$refs[userList].validate((valid) => {
        if (valid) {
          this.verify(userList);
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    verify(userList) {
      this.$axios
        .get("/verifyTelephone/" + this.userList.user_telephone)
        .then((res) => {
          if (res.data.status == "1000") {
            this.onSubmit(userList);
          } else {
            alert(res.data.messages);
          }
        })
        .catch((error) => {});
    },
    onSubmit(userList) {
      this.$axios
        .post("/Reset.do", this.userList)
        .then((res) => {
          alert(res.data.messages);
          this.$router.push("/ChooseRole");
          sessionStorage.setItem(
            "reset_telephone",
            this.userList.user_telephone
          );
        })
        .catch((error) => {});
    },

    cancle() {
      this.$router.push("/");
    },
  },
};
</script>

<style>
.loginFrom {
  border: 1px solid white;
  background-color: aliceblue;
  width: 550px;
  height: 400px;
  margin-top: 10%;
  margin-left: 32%;
}
.all {
  border: 1px solid white;
  height: 700px;
  background-image: url("../../assets/beijing.jpg");
  background-size: 100% 100%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.title {
  text-align: center;
  font-size: 24px;
  color: rgba(50, 50, 50, 0.8);
}
.box-card {
  background-color: aliceblue;
  border-radius: 10px;
  width: 480px;
  margin: 10% auto;
}
</style>